<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <cpn>
      
      <template v-slot:left> 
        <h2>这是left插槽</h2>
      </template>



      
    
    </cpn>


  </div>



  <template id="cpn">
    <div>
      <slot name="left"><span>插槽1</span></slot>
      <slot><span>插槽2</span></slot>
      <slot><span>插槽3</span></slot>
    </div>
  </template>


  <script src="vue.js"></script>
  <script>
      Vue.component("cpn", {
        template: "#cpn"
      })
    app = new Vue({
      //声明要绑定的id
      el: '#app',
      //数据对象
      data: {

      },
      //计算属性，调用时不需要加小括号
      computed: {

      },
      //定义方法（当前对象内需要加this）
      methods: {

      },
      //注册组件（局部），写法：自定义组件标签名:组件对象
      components: {

      }
    })
  </script>
</body>

</html>